<template>
  <div class="div">
    <Row style="margin-bottom: 1rem" v-has=tRole.EMAIL_1_204>
      <i-col span="24" align="right">
        <Button v-if="type==2" size="small" type="primary" @click="reply()">去回复</Button>
        <Button v-if="type==2" size="small" type="primary" @click="spam()">标为垃圾邮件</Button>
        <Button v-if="type==2" size="small" type="primary" @click="addBlacklist()">拉黑邮箱</Button>
        <Button v-if="type==1" size="small" type="primary" @click="removeSpam()">这不是垃圾邮件</Button>
      </i-col>
    </Row>
    <Row v-if="type===2" >
        <i-col span="12">
          <Tag color="blue" size="large" v-show="userNo.length!==0">用户编号：{{userNo}}</Tag>
          <Button type="success" icon="md-add" style="margin-left: 0.5rem" @click="relatedUser()" v-has=tRole.EMAIL_1_204>关联用户</Button>
        </i-col>
      <i-col span="12" align="right" v-has=tRole.EMAIL_1_204>
        <Select v-model="detailTag" style="width: 70%;" filterable multiple allow-create @on-create="" placeholder="标签">
          <Option v-for="item in tagList" :value="item" :key="item">{{ item }}</Option>
        </Select>
        <Button type="info" style="margin-left: 0.5rem" @click="saveStatusTags()">保存标签</Button>
      </i-col>
    </Row>

    <Row style="margin-top: 1rem">
      <i-col span="24" style="font-size: 12px;" align="right">
        <span>发件邮箱：</span><span>{{virtualName}}</span>
        <span style="margin-left: 1rem">收件邮箱：</span><span>{{emailTo}}</span>
        <span style="margin-left: 1rem">时间：</span><span>{{$tiyBJTime(new Date(createTime).getTime())}}</span>
      </i-col>
    </Row>
    <Row v-if="historyCount>=1" style="margin-top: 0.8rem">
      <i-col span="24" style="font-size: 13px;" align="left">
        <span>历史邮件：</span>
        <a @click="showHistory" ><Badge :count="historyCount" class-name="demo-badge-alone"></Badge></a>
        <Tag color="red" v-if="result">查询历史邮件失败</Tag>
      </i-col>
    </Row>
   <divider></divider>
    <div>
      <span class="base_key">邮件标题：</span>
      <span class="base_value">
        {{subject}}
      </span>
    </div>

    <div style="margin-top: 0.5rem">
      <p class="base_key">邮件正文：</p>
      <div class="content" @click="proxyImage" v-html="content" ></div>
    </div>

    <div  v-if="attachmentShow" >
      <Divider orientation="left">{{attachmentCount}}</Divider>
      <Row>
        <i-col v-if="isImg(item.suffix)" v-for="item in attachment" :key="item.id" class="demo-upload-list">
          <img :src="item.fileUrl"  ></img>
          <div class="demo-upload-list-cover" @click="showImage(item.fileUrl)">
            <p><span>{{item.fileName}}({{item.fileSize}})</span></p>
            <div style="position: absolute;bottom:0px;right:8px;">
              <Tooltip content="下载" placement="top">
                <Icon type="md-download" @click.stop="download(item.fileUrl,item.fileName)"></Icon>
              </Tooltip>
              <Tooltip content="预览" placement="top">
                <Icon type="ios-eye-outline" @click.stop="showImage(item.fileUrl)"></Icon>
              </Tooltip>
            </div>
          </div>
        </i-col>
      </Row>
      <Row v-if="!isImg(item.suffix)" v-for="item in attachment" :key="item.id" class="file-list">
        <span>{{item.fileName}}</span> <span style="color: #a687a9;margin-right: 1rem;">({{item.fileSize}})</span>
        <a href="javascript:void(0)" @click.stop="download(item.fileUrl,item.fileName)">下载</a>
      </Row>
    </div>


    <Modal
      v-model="status.historyEmail.isShow"
      title="历史往来邮件"
      width="65"
      :styles="{align:'center'}"
      :scrollable=true>
      <div slot="footer"></div>
      <history-email :sys-email="sysEmail" ref="HistoryEmail"></history-email>
    </Modal>

    <!-- 图片 -->
    <Modal
      v-model="status.modalImage.isShow"
      title=""
      :styles="{align:'center'}"
      :scrollable=true>
      <div slot="footer"></div>
      <div align="center"><Img :src="status.modalImage.url" style="max-width: 450px" /></div>
    </Modal>

    <Modal
      v-model="status.userNo.isShow"
      title="关联用户"
      :styles="{align:'center'}"
      :scrollable=true>
      <div slot="footer"></div>
      <div style="text-align: center;margin: 1rem">
        <p v-text="status.userNo.msg" style="margin-bottom: 1rem"></p>
        <Input v-if="status.userNo.isSelect" v-model="status.userNo.encodeName" clearable placeholder="请输入用户编号" style="width: 250px" />
        <Select v-else v-model="status.userNo.userId" placeholder="请选择用户编号" style="width:250px">
          <Option v-for="item in status.userNo.encodeNameList" :value="item.id" :key="item">{{item.encodeName}}</Option>
        </Select>

        <Button type="info" style="margin-left: 0.5rem" @click="manualRelate()">关联</Button>
      </div>
    </Modal>



  </div>
</template>

<!--javascript 代码-->
<script>

import tiyData from "./js/emailDetail/detail_data"
import {init,saveTags,relatedUser,manualRelate} from "./js/emailDetail/detail_funs"
import {createDownloadForm} from "../js/downloadUtils";
import actionUrls from "../../api/ApiUrls";
import HistoryEmail from "./HistoryEmail";
import parseData from "./js/parseEmail/parse_data"

export default {
  data(){
    return {
      tRole:{
          EMAIL_1_204:"EMAIL-1-204"
      },
      email:tiyData.tData.emailDetail,
      status:tiyData.tStatus,
      tagList:parseData.tData.tagList,
      detailTag:[],
      userNo:'',
      historyCount:0,
      result:false,
    }
  },
  components:{HistoryEmail},
  mounted() {
    this.userNo=this.encodeName;
  },
  watch:{
    isRefresh(newVal,oldVal) {
      if(newVal){
        init(this,tiyData);
      }
    },
    selectedTags(val){
      this.detailTag=val;
    },
    encodeName(val){
      this.userNo=val;
    },
  },
  props:{
    id:'',
    emailTo:"",
    createTime:"",
    subject:"",
    content:"",
    attachment:Array,
    attachmentShow:'',
    attachmentCount:"",
    selectedTags:Array,
    type:Number,
    virtualName:'',
    encodeName:'',
    emailAddressId:'',
    sysEmail:Number,
  },
  methods: {
    proxyImage: function (e) {
      if (e.target.tagName.toUpperCase() === 'IMG') {
        // 这里是需要执行的方法
        this.showImage(e.target.src);
      }
    },
    reply() {
      this.$emit('reply');
    },
    spam() {
      this.$emit('spam');
    },
    removeSpam() {
      this.$emit('removeSpam');
    },
    addBlacklist() {
      this.$emit('addBlacklist');
    },
    showImage(fileUrl) {
      this.status.modalImage.isShow = true;
      this.status.modalImage.url = fileUrl;
    },
    download(fileUrl, fileName) {
      let msgbody = {fileUrl, fileName}
      let downloadForm = createDownloadForm(msgbody, actionUrls.URL_DOWNLOAD_FILE);
      downloadForm.submit();
    },
    saveStatusTags() {
      for (let tag of this.detailTag) {
        if (tag == null || tag.trim() === "") {
          this.$Message.error("不能添加空标签！")
          return;
        }
      }
      if(this.detailTag.length <= 0){
          this.$Modal.confirm({
              content: '<p>没有选中任何标签，将清空此邮件标签，确认操作？</p>',
              onOk: () => {
                  saveTags(this, tiyData,1,this.detailTag);
              }
          });
      } else {
          saveTags(this, tiyData,1,this.detailTag);
      }

    },
    isImg(suffix){
      return [
        '.png', '.jpg', '.jpeg', '.bmp', '.gif', '.webp', '.psd', '.svg', '.tiff'].indexOf(suffix.toLowerCase()) !== -1;
    },
    relatedUser() {
      relatedUser(this,tiyData, this.virtualName,this.emailAddressId,1);
    },
    manualRelate() {
      manualRelate(this, tiyData,this.emailAddressId,1)
    },
    filterMethod(value, option) {
      return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
    },
    emailHistoryCount(virtualName) {
      let param = {
        "email": virtualName,
        "sysEmail":this.sysEmail,
      };
      let self = this;
      self.$apiEmail.getEmailHistoryCount(param).then(function (response) {
        if(response.success){
          self.historyCount = response.result;
        }
        self.result=!response.success;
      });
    },
    showHistory(){
      this.status.historyEmail.isShow=true;
      this.$refs.HistoryEmail.queryEmailHistoryList(this.virtualName);
    },
  },
}
</script>

<!--css样式-->
<style  lang="less">
@import  (once,optional)  "../css/base";

.div{
  margin: 0.5rem 1rem;
}

.content{
  width:100%;margin-top: 0.5rem;
  cursor:default;
}

.content img{
  cursor:pointer;
}

.demo-upload-list p{
  color:#fff;
  margin-left: 0.2rem;
  line-height:28px;
  font-size:0.6rem;
  word-wrap:break-word;
  word-break:normal;
  text-align: left;
}

.demo-upload-list{
  display: inline-block;
  width: 180px;
  height: 130px;
  text-align: left;
  line-height: 60px;

  overflow: hidden;
  background: #fff;
  position: relative;
  //box-shadow: 0 1px 1px rgb(107, 107, 124);
  margin-right: 4px;
}
.demo-upload-list img{
  width: 100%;
  height: auto;
}
.demo-upload-list-cover{
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(78, 71, 71, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
  display: block;
}
.demo-upload-list-cover i{
  color: #fff;
  font-size: 25px;
  cursor: pointer;
  margin: 0 2px;
}


.tip_div{
  background: @tiyPrimaryLightColor;
  padding: 1rem 2rem;
  margin: 3rem 0rem;
  min-height: 10rem;
}

.demo-badge-alone{
  background: #5cb85c !important;
  margin-right: 0.3rem;
  font-size: 13px;
}
.history-ol{
  margin-left: 2rem;
}

.file-list{
  max-width: 50rem;
  color: #130224 !important;
  margin-top:1.2rem;
  padding-left:0.8rem;
  font-weight: bold;
  font-size: 14px;
  line-height: 26px;
}
</style>
